<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%--
  Created by IntelliJ IDEA.
  User: qupen
  Date: 2016/12/8
  Time: 10:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="../../include/head.jsp">
    <jsp:param name="title" value="新增事件"/>
</jsp:include>
<link rel="stylesheet" href="/css/select2.css">
<jsp:include page="../../include/tenant_header.jsp"/>

<jsp:include page="../../include/tenant_sidebar.jsp"/>
<div class="content-wrapper content-wrapper-bg">
    <section class="content-header">
        <h4 class="page-title" style="display: inline-block"><spring:message code="label.message.list"/></h4>
        <a class="btn btn-add  pull-right" id="showOrHide" href="javascript:;" style="margin-left:44px;">
            <spring:message code="label.user.show.search"/>
        </a>
    </section>
    <section class="content">
        <div class="hidden" style="margin-bottom: 15px;" id="showOrHideSearch">
            <div class="row" style="margin-left: 0px;margin-right: 0px;">
                <div class="col-md-4" style="margin-top: 5px;padding-left: 0px;padding-right: 0px;">
                    <label style="width: 78px;">MTId:</label>
                    <select id="mtid" class="form-control sie-input-border sie-input-uwh" style="width: 150px;">

                    </select>
                </div>
                <div class="col-md-4" style="margin-top: 5px;padding-left: 0px;padding-right: 0px;">
                    <label style="width: 78px;"><spring:message code="label.start.time"/>:</label>

                    <div class="sie-calendar-parent">
                        <input type="text" readonly="readonly" class="form-control sie-calendar-input" id="start_time"
                               style="width: 150px;">
                        <img src="/images/calendar.png" class="sie-calendar-img"/>
                    </div>
                </div>
                <div class="col-md-4" style="margin-top: 5px;padding-left: 0px;padding-right: 0px;">
                    <label style="width: 78px;"><spring:message code="label.end.time"/>:</label>

                    <div class="sie-calendar-parent">
                        <input type="text" readonly="readonly" class="form-control sie-calendar-input" id="end_time"
                               style="width: 150px;">
                        <img src="/images/calendar.png" class="sie-calendar-img"/>
                    </div>
                </div>
            </div>

            <div class="row" style="margin-left: 0px;margin-right: 0px;">
                <div class="col-md-4" style="margin-top: 5px;padding-left: 0px;padding-right: 0px;">
                    <label style="width: 78px;"><spring:message code="label.tenant.children.state"/>:</label>
                    <select id="status" class="form-control sie-input-border sie-input-uwh" style="width: 150px;padding: 1px 12px;margin-right: 0px;">
                        <option value=""><spring:message code="label.tenant.all"/></option>
                        <option value="1"><spring:message code="label.tenant.processed"/></option>
                        <option value="0"><spring:message code="label.tenant.untreated"/></option>
                    </select>
                </div>
                <div class="col-md-4" style="margin-top: 5px;padding-left: 0px;padding-right: 0px;">
                    <label style="width: 78px;"><spring:message code="label.tenant.event"/>:</label>
                    <select id="idle" class="form-control sie-input-border sie-input-uwh" style="width: 150px;">

                    </select>
                </div>
                <div class="col-md-4" style="margin-top: 5px;padding-left: 0px;padding-right: 0px;">
                    <label style="width: 78px;"></label>
                    <a id="search" class="solid-button-orange" href="javascript:;" style="width: 150px;"><spring:message code="label.admin.search"/></a>
                </div>
            </div>
        </div>
        <div class="box box-primary table-header-line">
            <div class="box-body" style="padding: 0">
                <table class="table" id="user_list">
                    <thead>
                    <tr>
                        <th>MTId</th>
                        <th><spring:message code="label.tenant.event"/></th>
                        <th><spring:message code="label.start.time"/></th>
                        <th><spring:message code="label.end.time"/></th>
                        <th><spring:message code="label.tenant.children.state"/></th>
                        <th><spring:message code="label.operation"/></th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
        <%--</div>--%>
    </section>
</div>
<jsp:include page="../../include/foot.jsp"/>

<script src="/js/select2.full.min.js"></script>
<script>
    $(document).ready(function () {
        $('#mtid').select2({
                    placeholder: '<spring:message code="label.tenant.please.enter.MTId"/>',
                    minimumInputLength: 1,
                    paging: false,
                    searching: false,
                    multiple: false,
                    allowClear: true,
                    ajax: {
                        url: "/partner/{tenant}/api/v1/device/like".replace("{tenant}", getKeyByUrl()),
                        dataType: "json",
                        type: 'GET',
                        data: function (params) {
                            return {str: params.term};
                        },
                        processResults: function (data) {
                            var results = [];
                            $.each(data.data, function (i, v) {
                                var o = {};
                                o.id = v.device_id;
                                o.text = v.device_unique_id/* + "(" + v.device_name + ")"*/;
                                results.push(o);
                            });
                            return {
                                results: results
                            };
                        },
                        cache: true
                    },
                    escapeMarkup: function (m) {
                        return m;
                    }
                })
                .on('hide.bs.modal', function () {
                    $('#mtid').empty();
                });

        loadDataTables();
    });
    $(document).ready(function () {
        $('#idle').select2({
                    placeholder: '<spring:message code="label.tenant.please.enter.idle"/>',
                    minimumInputLength: 1,
                    paging: false,
                    searching: false,
                    multiple: false,
                    allowClear: true,
                    ajax: {
                        url: "/partner/{tenant}/api/v1/message/like".replace("{tenant}", getKeyByUrl()),
                        dataType: "json",
                        type: 'GET',
                        data: function (params) {
                            return {str: params.term};
                        },
                        processResults: function (data) {
                            var results = [];
                            $.each(data.data, function (i, v) {
                                var o = {};
                                o.id = v.event_id;
                                o.text = v.event_name/* + "(" + v.device_name + ")"*/;
                                results.push(o);
                            });
                            return {
                                results: results
                            };
                        },
                        cache: true
                    },
                    escapeMarkup: function (m) {
                        return m;
                    }
                })
                .on('hide.bs.modal', function () {
                    $('#idle').empty();
                });
    });
    $(document).ready(function () {
        $('#start_time').datepicker({
            language: "zh-CN",
            autoclose: true,
            format: "yyyy-mm-dd",
            todayHighlight:true
        });
        $('#end_time').datepicker({
            language: "zh-CN",
            autoclose: true,
            format: "yyyy-mm-dd",
            todayHighlight:true
        });
        bindDateInputClickEvent();
    });
    $(document).ready(function () {
        $("#showOrHide").click(function(){
            if ($("#showOrHideSearch").hasClass("hidden")){
                $("#showOrHideSearch").removeClass('hidden');
                $("#showOrHide").text('<spring:message code="label.user.hide.search"/>');
            }else{
                $("#showOrHideSearch").addClass('hidden');
                $("#showOrHide").text('<spring:message code="label.user.show.search"/>');
            }

        });

        $('#search').click(function () {
            loadDataTables();
        });
    });

    function loadDataTables() {
        var data = {};
        data['mtid'] = $("#mtid option:selected").text() == undefined ? "" : $("#mtid option:selected").text();
        data['startTime'] = $("#start_time").val();
        data['endTime'] = $("#end_time").val();
        data['idle'] = $('#idle option:selected').text() == undefined ? "" : $('#idle option:selected').text();
        data['status'] = $("#status option:selected").val() == undefined ? "" : $("#status option:selected").val();
        var table = $('#user_list').DataTable({
            "dom": '<"datatable-header"<"dataTables_filter">l><"datatable-scroll"t><"datatable-footer dataTable-footer-padding"<"pull-left"i><"pull-right"p>>',
            paging: true,
            lengthChange: false,
            ordering: true,
            autoWidth: false,
            info: true,
            "searching": false,
            "destroy": true,
            serverSide: true,
            fixedHeader: true,
            aLengthMenu: [15],
            ajax: {
//                url: '/partner/{tenant}/api/v1/messages'.replace("{tenant}", getKeyByUrl()),
                url: '/partner/{tenant}/api/v1/messagesByDataTable'.replace("{tenant}", getKeyByUrl()),
                data: data,
                dataSrc: 'data'
            },
            "columns": [
                {"data": "mtid"},
                {"data": "event_name"},
                {
                    "data": "start_time",
                    "render": function (data, type, full, meta) {
                        return new Date(data).formatXl();
                    }
                },
                {
                    "data": "end_time",
                    "render": function (data, type, full, meta) {
                        return new Date(data).formatXl();
                    }
                },
                {
                    "data": "status",
                    "render": function (data, type, full, meta) {
                        if (data == 0) {
                            return '未处理';
                        } else {
                            return '已处理';
                        }
                    }
                },
                {
                    "data": "create_time",
                    "render": function (data, type, full, meta) {
                        var divString;
                        if (full.status == 0) {
                            divString = '<div class="sie-btn-group">' +
                                    '<a href="javascript:;" onclick="updateStatus(\'' + full.event_id + '\',\'' + full.mtid + '\',\'' + full.start_time + '\',1)"><i class="sie-btn-start"></i><span>标记为已处理</span></a>' +
                                    '</div>';
                        } else {
                            divString = '<div class="sie-btn-group">' +
                                    '<a href="javascript:;" onclick="updateStatus(\'' + full.event_id + '\',\'' + full.mtid + '\',\'' + full.start_time + '\',0)"><i class="sie-btn-stop"></i><span>标记为未处理</span></a>' +
                                    '</div>';

                        }

                        return divString;
                    }
                }
            ],
            "language": {url: '/lang/datatable.chs.json'}
        });
    }

    function updateStatus(eventId, mtid, startTime, status) {
        $.ajax({
            url: "/partner/{tenant}/api/v1/message/updateStatus".replace("{tenant}", getKeyByUrl()),
            type: "post",
            data: JSON.stringify({
                eventId: eventId,
                mtid: mtid,
                startTime: startTime,
                status: status
            }),
            contentType: "application/json;charset=utf-8",
            success: function (data) {
                loadDataTables();
            },
            error: function (e) {
                console.log(e);
            }
        })
    }
</script>
